<html>

<head>
    <!-- jq -->
    <script src="../public/jQuery.min.js"></script>
    <!-- jq -->
    <!-- 轮播图 -->
    <link rel="stylesheet" href="../public/swiper-bundle.min.css">
    <script src="../public/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="../css/index/index.scss">
    <!-- 轮播图 -->
</head>

<body>
    <div id="header">
        <div class="swiperbox">
            <div class="nav">
                <div class="navtop">
                    <div class="navimg">
                        <img src="../img/pclogin/logo.png" alt="logo" class="logoimg">
                    </div>
                    <p class="logotit">人生营家</p>
                </div>

                <div class="navright">
                    <div><a href="index.html">首页</a></div>
                    <div><a href="recommend.html">营地推荐</a></div>
                    <div><a href="circle.html">营友圈</a></div>
                    <div><a href="equip.html">找装备</a></div>
                    <div><a href="callus.html">联系我们</a></div>
                </div>
                <div class="navbut">
                    <a href="login.html">
                        <button class="loginbut">登录</button></a>
                    <a href="#"><button class="signbut">注册</button></a>
                </div>
                <div class="search">
                    <input type="text" placeholder="输入想去的地方" class="sinput">
                    <img src="../img/telindex//search.png" alt="search" class="simg">
                </div>
                <div class="group" id="toggleButton">
                    <img src="../img/telindex/group.png" alt="group">
                </div>
                <div class="navlist" id="hiddenBox">
                    <p><a href="index.html">首页</a></p>
                    <p><a href="recommend.html">营地推荐</a></p>
                    <p><a href="circle.html">营友圈</a></p>
                    <p><a href="equip.html">找装备</a></p>
                    <p><a href="callus.html">联系我们</a></p>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // 菜单隐藏显示
    const toggleButton = document.getElementById('toggleButton');
    const hiddenBox = document.getElementById('hiddenBox');

    let isHidden = true;

    toggleButton.addEventListener('click', () => {
        if (isHidden) {
            hiddenBox.style.display = 'block';
            // toggleButton.textContent = '点击隐藏';
        } else {
            hiddenBox.style.display = 'none';
            // toggleButton.textContent = '点击显示';
        }

        isHidden = !isHidden;
    });

    // 菜单隐藏显示
</script>
<style lang="scss">
    #header {
        width: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;

        .swiper {
            width: 100%;
        }

        .nav {
            width: 90%;
            margin: auto;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            justify-content: space-between;

            .navtop {
                display: flex;
                justify-content: space-between;

                .navimg {


                    .logimg {
                        width: 50%;
                        height: auto;
                    }
                }

                .logotit {
                    line-height: 100px;
                    font-size: 42px;
                    font-weight: bold;
                    color: #5C7BDA;
                    margin-left: 20px;
                    box-sizing: border-box;
                }
            }


            .navright {
                display: flex;
                justify-content: space-between;
                font-size: 1.6em;
                line-height: 100px;
                margin-left: 18%;

                & div {
                    padding: 0 30px;
                    box-sizing: border-box;

                    & a {
                        text-decoration: none;
                        color: black;
                    }
                }

                & div:hover {
                    background-color: #5C7BDA;

                    & a {
                        color: white;
                    }
                }

            }

            .navbut {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: bold;

                .loginbut {
                    cursor: pointer;
                    color: #F05E5E;
                    border: solid 1px #F05E5E;
                    margin-right: 23px;
                    padding: 10px 28px;
                    border-radius: 20px;
                    background-color: white;

                    & a {
                        color: #F05E5E;
                        text-decoration: none;
                    }
                }

                .signbut {
                    cursor: pointer;
                    color: #A3A3A3;
                    border: solid #A3A3A3 1px;
                    margin-right: 23px;
                    padding: 10px 32px;
                    border-radius: 20px;
                    background-color: white;
                }
            }

            .search {
                border: solid 1px #F0F0F0;
                color: #F0F0F0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 45px;
                margin-left: 10%;
                box-sizing: border-box;
                display: none;
                border-radius: 20px;

                .sinput {
                    border: none;
                    outline: none;
                }

                .simg {
                    width: 2rem;
                    height: 2rem;
                }
            }

            .group {
                display: none;
            }

            .navlist {
                display: none;
            }
        }

        /* 轮播图 */
        .swiperindex {
            width: 100%;
            position: relative;
        }

        .shade {
            z-index: 999;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.2);
            text-align: center;
            color: white;
            font-size: 1vw;
            box-sizing: border-box;

            .shadebox {
                margin-top: 10%;
            }

            .shadetit {
                font-size: 6vw;
                box-sizing: border-box;
            }

            .shadetext {
                margin-bottom: 2%;
            }

            .shadea {
                margin: auto;
                width: 16%;
                padding: 1em 2em;
                box-sizing: border-box;
                border: solid 3px white;
                border-radius: 40px;

                & a {
                    color: white;
                    text-decoration: none;
                }
            }
        }

        /* 轮播图 */

    }
    @media screen and (max-width:1600px) {
        #header{
            .nav{
                .navright{
                    font-size: 1em;
                    margin-left: 0;
                }
            }
        }
    }
    @media screen and (max-width:1200px) {
        #header{
            .nav{
                .navtop{
                    .logotit{
                        font-size: 20px;
                    }
                }
                .navright{
                    font-size: 1em;
                    margin-left: 0;
                    & div{
                        padding: 0 10px;
                    }
                }
            }
        }
    }
    @media screen and (max-width:850px) {
        #header{
            .nav{
                .navtop{
                    .logotit{
                        font-size: 20px;
                    }
                }
                .navright{
                    font-size: 1em;
                    margin-left: 0;
                    & div{
                        padding: 0 2px;
                    }
                }
            }
        }
    }

    @media screen and (max-width:769px) {
        * {
            font-size: 10px;
        }

        #header {
            .nav {
                position: relative;

                .navtop {
                    .navimg {
                        display: flex;
                        align-items: center;
                        width: 10%;

                        .logoimg {
                            width: 30px;
                            height: auto;
                        }
                    }

                    .logotit {
                        font-size: 10px;
                    }
                }

                .navright {
                    display: none;
                }

                .navbut {
                    display: none;
                }

                .search {
                    display: flex;
                    width: 50%;
                    height: 30px;

                    .sinput {
                        width: 60%;
                    }
                }

                .group {
                    display: block;
                    width: 30px;
                    height: 40px;

                    & img {
                        margin-top: 10px;
                        max-width: 100%;
                        max-height: 100%;
                        object-fit: cover;
                    }
                }

                .navlist {
                    width: 30%;
                    z-index: 9999;
                    position: absolute;
                    bottom: -170%;
                    right: -5%;
                    text-align: center;
                    background-color: white;
                    border-radius: 4px;

                    & p {
                        margin-top: 10%;

                        & a {
                            font-size: 2em;
                            text-decoration: none;
                            color: black;

                        }
                    }

                    & p:hover {
                        background-color: #89A5FC;

                        & a {
                            color: white;
                        }
                    }
                }
            }

            .shade {
                .shadebox {
                    .shadea {
                        width: 30%;
                    }
                }
            }
        }
    }

</style>

</html>
